<template>
  <div class="area" style="background-color: red">
    <h3>这是 APP 组件</h3>
    副标题：<input v-model="subtitle" type="text" />
    <FooterVue />
  </div>
</template>

<script>
import { computed } from 'vue'
import FooterVue from './provide--Footer.vue'

export default {
  components: { FooterVue },
  data: () => ({
    title: '博客',
    subtitle: '百万博主分享经验',
  }),
  methods: {
    changeSubtitle(sub) {
      this.subtitle = sub
    },
  },
  // provide: { title: this.title }, // 对象方式访问不到 this
  provide() {
    // 如果想访问组件实例 this，需要采用函数方式
    return {
      title: this.title, // 和注入方不具备响应式连接
      subtitle: computed(() => this.subtitle), // 借助组合式 API 中的 computed 函数，提供和注入方具备响应式连接的数据
      changeSubtitle: this.changeSubtitle, // 提供修改响应式 subtitle 的函数
    }
  },
}
</script>

<script setup>
import { provide, ref } from 'vue'
import FooterVue from './provide--Footer.vue'

let title = '博客'
let subtitle = ref('百万博主分享经验')

function changeSubtitle(sub) {
  subtitle.value = sub
}

// 为后代组件提供数据
provide('title', title) // 提供普通的数据
provide('subtitle', subtitle) // 提供响应式的数据，自动和注入方保持响应式的连接
provide('changeSubtitle', changeSubtitle) // 提供修改响应式的数据 subtitle 的函数
</script>

<style scoped>
.area {
  padding: 15px;
}
</style>
